<template>
    <div class="login-bg" style="height: 60rem;">

    <div class="login layui-anim layui-anim-up">
        <div class="message"><img src="../../assets/bodalogo.png" style="height: 80px"></div>
        <div id="darkbannerwrap"></div>

        <form method="post" class="layui-form" >
            <input name="username" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" v-model="name">
            <hr class="hr15">
            <input name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input" v-model="psd" @keydown.enter="loginsystem">
            <hr class="hr15">
            <input value="登录" lay-submit lay-filter="login" style="width:85%;" @click="loginsystem" class="subBtn">
        </form>
    </div>
    </div>
</template>

<script>
    import service from '../../service'
    import { mapActions, mapState } from "vuex";
    export default {
        name: "login",
        mounted() {
        },
        data(){
            return{
                name:"",
                psd:""
            }
        },
        methods:{
            loginsystem(){
                var user = {
                    "name":this.name,
                    "psd":this.psd
                }
                this.$hhh.post("http://"+window.location.hostname+":8011/login",user).then((response)=> {
                    if(response.data === "用户名或密码不正确！"){
                        layer.msg('用户名或密码不正确，请重试', {icon: 1});
                    }
                    var info = response.data.split("&",2);
                    if(info[0] === "登录成功"){
                        this.updateLoginStatus(true);
                        this.updateOPInfo();
                        sessionStorage.setItem("isin",true);
                        sessionStorage.setItem("username",info[1]);
                        // this.$router.push('/workarea');
                        window.location.reload();
                    }
                })
            },
            ...mapActions(["updateLoginStatus","updateOPInfo"]),
        },

        computed:{
            ...mapState({
                login:state=>state.loginStatus,
            })
        },
    }
</script>

<style scoped>
    .subBtn{
        display: inline-block;
        vertical-align: middle;
        padding: 12px 24px;
        margin: 0px;
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        color: #ffffff;
        background-color: #189F92;
        border-radius: 3px;
        border: none;
    }

</style>